<script setup lang="ts">
import { useRoute } from 'vue-router';
import { computed, ref, watch } from 'vue';
import Empty from 'src/components/Empty.vue';
import axios from 'axios';
import useRcs2AgvStore from '../stores/useRcs2AgvStore';

const activeTab = ref('agvLog');
const route = useRoute();


const isLoading = ref(false);
const iframeUrl = ref('');
const errorMsg = ref('');
const ip = computed(() => route.params.ip);

/*
http://10.10.116.55:8080/geye/?appPage=agvLog&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=control&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=geye&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=radar&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=radarRecord&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=sensorSwitch&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=battery&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=motionCurve&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=loadRatio&viewRange=realtime&showMenu=true
http://10.10.116.55:8080/geye/?appPage=distanceSensor&viewRange=realtime&showMenu=true
*/

watch([ip, activeTab], async () => {
  const ipa = ip.value;
  const ac = activeTab.value;
  if (!ipa || !ac) {
    errorMsg.value = '暂无内容';
    return '';
  }

  // isLoading.value = true;
  // const url = `http://${ipa}:8080/geye/?appPage=${ac}&viewRange=realtime&showMenu=false`;
  // try {
  //   await axios({ method: 'head', url: `http://${ipa}:8080/`, timeout: 1000 });
  //   iframeUrl.value = url;
  //   errorMsg.value = '';
  //
  // } catch (error) {
  //   if (error.code === 'ECONNABORTED') {
  //     errorMsg.value = '连接超时. ' + url;
  //
  //   } else {
  //     errorMsg.value = _.toString(error) + '. ' + url;
  //   }
  //
  // } finally {
  //   isLoading.value = false;
  // }

  errorMsg.value = '';
  isLoading.value = false;
  iframeUrl.value = `http://${ipa}:8080/geye/?appPage=${ac}&viewRange=realtime&showMenu=false`;

}, { immediate: true });

</script>
<template>
  <div class="summary-layout">
    <q-tabs v-model="activeTab" align="left" class="car-tabs text-amber-13">
      <!--
      AGV 日志
  遥控器
  查看相机
  雷达实时
  雷达回放
  传感器
  电池
  运行曲线
  负载率
  距离传感器
      -->
      <q-tab name="agvLog" label="AGV日志" />
      <q-tab name="control" label="遥控器" />
      <q-tab name="geye" label="查看相机" />
      <q-tab name="radar" label="雷达实时" />
      <q-tab name="radarRecord" label="雷达回放" />
      <q-tab name="sensorSwitch" label="传感器" />
      <q-tab name="battery" label="电池" />
      <q-tab name="motionCurve" label="运行曲线" />
      <q-tab name="loadRatio" label="负载率" />
      <q-tab name="distanceSensor" label="距离传感器" />
    </q-tabs>
    <q-item v-if="isLoading" class="full-width">
      <q-item-section avatar>
        <q-skeleton type="QAvatar" />
      </q-item-section>

      <q-item-section>
        <q-item-label>
          <q-skeleton type="text" />
        </q-item-label>
        <q-item-label caption>
          <q-skeleton type="text" width="65%" />
        </q-item-label>
      </q-item-section>
    </q-item>
    <Empty v-else-if="errorMsg" :description="errorMsg" />
    <iframe v-else :src="iframeUrl" :key="iframeUrl"
            style="visibility: visible;height: 100%;width: 100%;border: none;" />
  </div>
</template>
<style lang="less" scoped>
.summary-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .car-info {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);

    .toolbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6;
      padding: 11px 0 10px 12px;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 10px;
      }

      .buttons {
        flex: 1;
        padding-left: 12px;
      }

      .toolbar-icon {
        cursor: pointer;
        padding: 0 12px
      }
    }

    .car-info-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 5px;

      .car-info-cols {
        flex: 33.3333%;
        display: flex;
        flex-direction: row;
      }

      .label {
        font-size: 13px;
        color: #6e6e6e;
        padding: 5px;
        flex-shrink: 0;
      }

      .value {
        font-size: 15px;
        padding-top: 3px;
        flex: 1;

        .q-linear-progress {
          width: 100%;
          margin-top: 5px;
        }
      }
    }
  }

  .q-tabs.car-tabs {

    .q-tab:not(.q-tab--active) {
      color: #393939;
    }
  }

  .car-tabs {
    background: #f5f4f4;
    margin: 0 8px;

    .q-tab {
      height: 100%;
      padding: 5px 10px;
      min-height: 40px;
    }

    .q-tabs__header {
      margin: 0 0 10px;
    }
  }

  .q-tab-panels {
    flex: 1;
    padding: 0 8px;
    background: #f5f4f4;
  }

}

.error-card {
  margin: 20px;
  text-align: center;
}

/* 定义进入和离开时的动画 */
.slide-up-down-enter-active,
.slide-up-down-leave-active {
  transition: all 0.3s ease;
  max-height: 500px; /* 根据你的内容调整 */
  overflow: hidden;
}

.slide-up-down-enter-from {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}

.slide-up-down-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}

.q-table__middle {
  border: 1px solid #e5e5ed;
  border-bottom: 0;
}

.q-panel > div {
  padding: 8px;
  background: #fff;
}

.q-table {
  thead {
    background: #fafafc;

    tr {
      height: 40px;
      border-color: #efeff5;

      &:last-child th {
        top: 48px;
      }

      &:first-child th {
        top: 0;
        background: #fafafc;
      }

      th {
        border-right: 1px solid #efeff5;
        position: sticky;
        z-index: 1;

        &:last-child {
          border-right: none;
        }
      }
    }
  }

  tbody {
    scroll-margin-top: 48px;

    tr {
      td {
        height: 40px;
        padding: 0;
        border-color: #efeff5;
        color: #333639;
        border-right: 1px solid #efeff5;

        &.text-left {
          padding: 0 5px;
        }

        &:last-child {
          border-right: none;
        }
      }

      &:last-child {
        td {
          border-bottom: 1px solid #efeff5;
        }
      }
    }
  }
}

.q-table__card {
  box-shadow: none;
}
</style>

